<template>
  <div class="page-index">
    <!-- 导航栏 -->
    <div class="nav-box">
      <nav>
        <div class="logo">
          <img :src="logoImg"
               alt="">
        </div>
        <!-- nav左侧tab栏 -->
        <div class="tab-nav">
          <router-link :to="item.path"
                       v-for="item in tabNav"
                       :key="item.id"
                       :class="{'nav-active':item.id ==$route.meta.id}">{{item.text}}</router-link>

        </div>
        <!-- 搜索输入框 -->
        <div class="inp-box">
          <input type="text"
                 placeholder="请输入搜索内容..."
                 v-model.trim="searchInner"
                 @keyup.enter="findMessage" />
          <button @click="findMessage">搜索</button>
        </div>
        <!-- TODO:登录显示个人中心-->
        <div v-if="isToken"
             class="person-tab"
             @mouseenter="showPersonMsg"
             @mouseleave="closePersonMsg">
          <!-- 头像  点击跳完个人中心（文章） -->
          <div @click="goPerosonArticle">
            <el-avatar :src="userinfo.avatar"
                       class="login-person"></el-avatar>
          </div>

          <!-- 鼠标移入，显示下拉信息 -->
          <transition enter-active-class="animate__animated animate__fadeIn"
                      :duration="{enter:100}">
            <div class="dropdown-message"
                 v-show="showMessage">
              <!-- 用户名 -->
              <p class="user">{{userinfo.nickname}}</p>
              <!-- 我的文章 -->
              <div class="dropdowm-menus"
                   @click="goPerosonArticle">
                <i class="el-icon-notebook-2"></i>
                <span>我的文章</span>
                <i class="el-icon-arrow-right arrows"></i>
              </div>
              <!-- 我的收藏 -->
              <div class="dropdowm-menus"
                   @click="goPersonColl">
                <i class="el-icon-star-off"
                   style="fontSize:16px;"></i>
                <span>我的收藏</span>
                <i class="el-icon-arrow-right arrows"></i>
              </div>
              <el-divider></el-divider>
              <!-- 退出登录 -->
              <div class="dropdowm-menus"
                   @click="loginOut">
                <i class="el-icon-switch-button"></i>
                <span>退出登录</span>
                <i class="el-icon-arrow-right arrows"></i>
              </div>

            </div>
          </transition>
        </div>
        <!-- TODO:未登录显示按钮  -->
        <div class="logins"
             v-else>
          <router-link to="/login">登录</router-link>
          <button @click="$router.push('/register')">注册</button>
        </div>
        <!-- 发布按钮 -->
        <button class="publish-btn"
                @click="$router.push('/publish')">
          <img :src="svgImg.svgUpload"
               alt="">
          <span>投稿</span>
        </button>
      </nav>
    </div>
    <div class="cont-box">
      <transition enter-active-class="animate__animated animate__fadeIn"
                  :duration="{enter:250}">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
import svgUpload from '@/assets/svg/upload.svg'
import defaultAvator from '@/assets/images/default-avator.png'
import logo from '@/assets/images/logo.png'
import { getToken, removeToken } from '@/request/token'
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      // 左侧导航栏
      tabNav: [
        { id: 1, path: '/home', text: '发现' },
        { id: 2, path: '/recommend', text: '推荐' },
        { id: 3, path: '/community', text: '社区' },
        { id: 4, path: '/specialty', text: '特产' }
      ],
      // svg图片
      svgImg: {
        svgUpload
      },
      defaultAvator,
      searchInner: '' || sessionStorage.getItem('searchKey'), //搜索内容
      isToken: getToken(),
      logoImg: logo,
      showMessage: false //展示个人下拉信息
    }
  },
  computed: {
    ...mapState(['userinfo'])
  },
  methods: {
    ...mapActions(['getSearchlist', 'getUserInfo']),
    // 搜索内容事件
    findMessage() {
      if (this.searchInner) {
        sessionStorage.setItem('searchKey', this.searchInner)
        // 当前路由哦在搜索页，则不跳转
        if (this.$route.path == '/search') {
          this.getSearchlist(this.searchInner)
        } else {
          this.$router.push({
            path: '/search'
          })
          this.getSearchlist(this.searchInner)
        }
      }
    },
    // 鼠标移入头像
    showPersonMsg() {
      this.showMessage = true
    },
    closePersonMsg() {
      this.showMessage = false
    },
    /* 登录后，初始化导航个人信息 */
    initPersonMes() {
      if (this.isToken) {
        this.user = '周易子'
      }
    },
    /* 退出登录 */
    loginOut() {
      removeToken()
      this.$message('success', '退出登录成功', 1000)
      this.$router.push({
        path: '/login'
      })
    },
    /* 去个人文章 */
    goPerosonArticle() {
      if (this.$route.path == '/person/article') {
        return false
      }
      this.$router.push('/person/article')
    },
    /* 去个人收藏 */
    goPersonColl() {
      if (this.$route.path == '/person/collection') {
        return false
      }
      this.$router.push('/person/collection')
    }
  },
  created() {
    this.initPersonMes()
    //解决刷新无法获取内容
    if (sessionStorage.getItem('searchKey') && this.$route.path == '/search') {
      this.getSearchlist(sessionStorage.getItem('searchKey'))
      console.log(sessionStorage.getItem('searchKey'))
    }
    this.getUserInfo()
  }
}
</script>

<style lang="less" scoped>
.nav-active {
  color: #33c5c5;
}
.page-index {
  .nav-box {
    width: 100%;
    box-shadow: 0px 2px 2px #efefef;
  }
  nav {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    height: 70px;
    .logo {
      margin-left: 30px;
      width: 130px;
      img {
        width: 85%;
      }
    }
    /* tab导航 */
    .tab-nav {
      display: flex;
      align-items: center;
      margin: 0 30px;
      height: 100%;
      a {
        display: inline-block;
        padding: 0 25px;
        height: 100%;
        line-height: 70px;
        box-sizing: border-box;
        transition: all 0.1s;
        &:hover {
          border-bottom: 2px solid #33c5c5;
          opacity: 1;
        }
      }
    }
    /* 输入框 */
    .inp-box {
      display: flex;
      justify-content: end; // 向右对象
      width: 350px;
      height: 35px;
      input {
        padding-left: 10px;
        width: 200px;
        height: 35px;
        outline: none;
        transition: all 0.3s;
        border-radius: 24px 0 0 24px;
        border: 1px solid #ccc;
        &:focus {
          border: 1px solid #33c5c5;
          width: 280px;
        }
      }
      button {
        height: 37px;
        width: 55px;
        cursor: pointer;
        color: #ffffff;
        border-radius: 0 24px 24px 0;
        background-color: #33c5c5;
        border: none;
      }
    }
    /* 个人中心 */
    .person-tab {
      position: relative;
      display: block;
      margin-left: auto;
      margin-right: 40px;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      .login-person {
        position: absolute;
        top: 0;
        left: 0;
        width: 45px;
        height: 45px;
        transition: all 0.3s;
        cursor: pointer;
      }
      /* 鼠标移入，头像移动 */
      &:hover {
        .login-person {
          z-index: 999;
          position: absolute;
          top: 20px;
          left: -16px;
          width: 60px;
          height: 60px;
        }
      }
      /* 个人下拉信息展示 */
      .dropdown-message {
        z-index: 99;
        position: absolute;
        top: 50px;
        left: -95px;
        width: 215px;
        padding-bottom: 15px;
        border-radius: 4px;
        border: 1px solid #ccc;
        background-color: #fff;
        .user {
          margin-top: 35px;
          margin-bottom: 20px;
          text-align: center;
          letter-spacing: 2px;
          color: #33c5c5;
        }
        /* 下拉菜单各项 */
        .dropdowm-menus {
          display: flex;
          align-items: center;
          margin: 0 15px;
          padding: 0 6px;
          height: 37px;
          font-size: 13px;
          letter-spacing: 2px;
          cursor: pointer;
          &:hover {
            border-radius: 4px;
            background-color: #e3e5e7;
          }
          i {
            font-size: 15px;
            padding-right: 5px;
          }
          .arrows {
            padding-right: 0;
            font-size: 14px;
            font-weight: 600;
            padding-left: 70px;
          }
        }
        .el-divider {
          margin: 8px 0 12px 0;
          color: #efefef;
        }
      }
    }
    /* 注册·，登录区域 */
    .logins {
      display: flex;
      align-items: center;
      margin-left: auto;
      margin-right: 25px;
      a {
        padding: 0 15px;
        color: rgb(173, 170, 170);
      }
      /* 注册按钮 */
      button {
        width: 80px;
        height: 38px;
        line-height: 24px;
        margin-left: 15px;
        font-size: 15px;
        color: #33c5c5;
        cursor: pointer;
        border-radius: 20px;
        border: 1px solid #33c5c5;
        background-color: transparent;
        &:hover {
          background-color: rgba(51, 197, 197, 0.2);
        }
      }
    }
    /* 发布按钮 */
    .publish-btn {
      margin-right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 38px;
      border: none;
      font-size: 14px;
      cursor: pointer;
      border-radius: 4px;
      background-color: #33c5c5;
      img {
        width: 17px;
      }
      span {
        padding-left: 2px;
        color: #ffffff;
      }
    }
  }

  /* 内容切换区域 */
  .cont-box {
    margin: 0 auto;
  }
}
</style>